<template>
    <div class="cart_item">
      <div class="cart_column column_1">
        <el-checkbox class="my_el_checkbox" v-model="course.selected"></el-checkbox>
      </div>
      <div class="cart_column column_2">
        <img :src="course.course_img" alt="">
        <span><router-link :to="{ name: 'detail', params: { id: course.course_id } }">{{ course.name }}</router-link></span>
      </div>
      <div class="cart_column column_3">
        <el-select v-model="course.expire" size="mini" placeholder="请选择购买有效期" class="my_el_select">
          <el-option
            :label="item.expire_text"
            :value="item.id"
            :key="key"
            v-for="(item, key) in course.expire_list"
          ></el-option>
<!--          <el-option label="2个月有效" value="60" key="60"></el-option>-->
<!--          <el-option label="3个月有效" value="90" key="90"></el-option>-->
<!--          <el-option label="永久有效" value="10000" key="10000"></el-option>-->
        </el-select>
      </div>
      <div class="cart_column column_4">¥{{ course.price }}</div>
      <div class="cart_column column_4 delete-point" @click="deleteHander">删除</div>
    </div>
</template>

<script>
export default {
    name: "CartItem",
    props: ['course', ],
    data(){
      return {
        checked: false,
        // expire: "1个月有效",
        price: 0,
      }
    },
    watch: {
        "course.selected": function (is_selected) {
          this.change_selected_status(is_selected)
        },
        "course.expire": function(){
          // 切换商品的有效期
          this.change_course_expire();
        }
    },
  methods: {
      change_selected_status(is_selected) {
        let token = '';
        if (localStorage.token) {
          token = localStorage.token;
        }
        if (sessionStorage.token) {
          token = sessionStorage.token;
        }

        if (!token) {
          this.$confirm("对不起，你还没有登录")
          .then(() => {
            this.$router.push({
              name: 'login'
            })
          })
        }

        let course_id = this.course.course_id;
        this.$axios.patch(`${this.$settings.Host}/cart/`,{
            is_selected,
            course_id,
          },{
            headers:{
              "Authorization":"jwt " + token,
            }
          })
          .then(res => {
              console.log(res.data.message);
              // 通知父组件重新计算总价格
              this.$emit("changeSelect");
          })
          .catch(err => console.log(err))
      },
      deleteHander () {
        let token = '';
        if (localStorage.token) {
          token = localStorage.token;
        }
        if (sessionStorage.token) {
          token = sessionStorage.token;
        }

        if (!token) {
          this.$confirm("对不起，你还没有登录")
          .then(() => {
            this.$router.push({
              name: 'login'
            })
          })
        }

        let course_id = this.course.course_id;
        this.$confirm(`您确认要删除《${this.course.name}》这件商品吗？`).then(()=>{
          // 确认删除
          this.$axios.delete(`${this.$settings.Host}/cart/`,{
            params:{
              course_id,
            },
            headers: {
              "Authorization":"jwt " + token,
            }
          }).then(response=>{
            // 通知父组件删除当前子组件
            this.$emit("deleteHander")
          }).catch(error=>{
            console.log(error.response)
          })
        }).catch(()=>{
          // 取消删除
        });

      },
      change_course_expire () {
        // 切换课程有效期
        let token = '';
        if (localStorage.token) {
          token = localStorage.token;
        }
        if (sessionStorage.token) {
          token = sessionStorage.token;
        }

        if (!token) {
          this.$confirm("对不起，你还没有登录")
          .then(() => {
            this.$router.push({
              name: 'login'
            })
          })
        }

        // 切换商品的有效期同时，改变价格
        this.$axios.put(`${this.$settings.Host}/cart/`,{
          course_id: this.course.course_id,
          expire_id: this.course.expire,
        },{
          headers:{
            "Authorization":"jwt " + token,
          }
        }).then(response=>{
          console.log(response.data);
          this.price = response.data.price;
        }).catch(error=>{
          console.log(error.response)
        })
      }

  }
}
</script>

<style scoped>
.cart_item::after{
  content: "";
  display: block;
  clear: both;
}
.cart_column{
  float: left;
  height: 250px;
}
.cart_item .column_1{
  width: 88px;
  position: relative;
}
.my_el_checkbox{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 16px;
  height: 16px;
}
.cart_item .column_2 {
  padding: 67px 10px;
  width: 520px;
  height: 116px;
}
.cart_item .column_2 img{
  width: 175px;
  height: 115px;
  margin-right: 35px;
  vertical-align: middle;
}
.cart_item .column_3{
  width: 197px;
  position: relative;
  padding-left: 10px;
}
.my_el_select{
  width: 117px;
  height: 28px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
.cart_item .column_4{
  padding: 67px 10px;
  height: 116px;
  width: 142px;
  line-height: 116px;
}
.delete-point {
  cursor: pointer;
}

</style>

